<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>首页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: layout-latest-js" />
	<th:block th:include="include :: ztree-js" />
    <script th:src="@{/js/echarts/echarts.min.js}"></script>
    <script th:src="@{/js/echarts/echarts-gl.min.js}"></script>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>近五日登录次数</h5>
                        <h2 id="loginh2"></h2>
                        <div id="sparkline1"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>近五日扫描次数</h5>
                        <h2 id="scanId"></h2>
                        <div id="sparkline2"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>近五日自动操作次数</h5>
                        <h2 id="Auto_Login"></h2>
                        <div id="sparkline3"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>近五日半自动操作次数</h5>
                        <h2 id="SemiAutoOperation"></h2>
                        <div id="sparkline4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
    <th:block th:include="include :: peity-js" />
    <th:block th:include="include :: sparkline-js" />
    <script type="text/javascript">
        $(document).ready(function () {
            let prefix = ctx + "system/coordinates";
            //获取登录数据
            let dataNo1 = [];
            let dataNo2 = [];
            let dataNo3 = [];
            let dataNo4 = [];
            $.get(prefix+'/getLoginCount',function (data) {
                let obj = JSON.parse(data);
                dataNo1.push(obj[0].fiveDaysMap);
                dataNo1.push(obj[0].fourDaysMap);
                dataNo1.push(obj[0].threeDaysMap);
                dataNo1.push(obj[0].twoDaysMap);
                dataNo1.push(obj[0].firstDaysMap);

                $("#loginh2").text(obj[0].sumLoginCount);
                $("#sparkline1").sparkline(dataNo1, {
                    type: 'line',
                    width: '100%',
                    height: '60',
                    lineColor: '#1ab394',
                    fillColor: false
                });
            });

            //获取扫描数据
            $.get(prefix+'/getScanCount',function (data) {
                let obj = JSON.parse(data);
                dataNo2.push(obj[0].fiveDaysMap);
                dataNo2.push(obj[0].fourDaysMap);
                dataNo2.push(obj[0].threeDaysMap);
                dataNo2.push(obj[0].twoDaysMap);
                dataNo2.push(obj[0].firstDaysMap);
                console.log(obj[0].sumLoginCount);
                $("#scanId").text(obj[0].sumScanCount);
                $("#sparkline2").sparkline(dataNo2, {
                    type: 'line',
                    width: '100%',
                    height: '60',
                    lineColor: '#1ab394',
                    fillColor: false
                });
            });
            //获取自动登录数据
            $.get(prefix+'/getAutoLoginCount',function (data) {
                let obj = JSON.parse(data);
                dataNo3.push(obj[0].fiveDaysMap);
                dataNo3.push(obj[0].fourDaysMap);
                dataNo3.push(obj[0].threeDaysMap);
                dataNo3.push(obj[0].twoDaysMap);
                dataNo3.push(obj[0].firstDaysMap);
                $("#Auto_Login").text(obj[0].sumAutoLoginCount);
                $("#sparkline3").sparkline(dataNo3, {
                    type: 'line',
                    width: '100%',
                    height: '60',
                    lineColor: '#1ab394',
                    fillColor: false
                });
            });
            //获取半自动操作数据
            $.get(prefix+'/getSemiAutoOperationCount',function (data) {
                let obj = JSON.parse(data);
                dataNo4.push(obj[0].fiveDaysMap);
                dataNo4.push(obj[0].fourDaysMap);
                dataNo4.push(obj[0].threeDaysMap);
                dataNo4.push(obj[0].twoDaysMap);
                dataNo4.push(obj[0].firstDaysMap);
                $("#SemiAutoOperation").text(obj[0].sumSemiAutoOperationCount);
                $("#sparkline4").sparkline(dataNo4, {
                    type: 'line',
                    width: '100%',
                    height: '60',
                    lineColor: '#1ab394',
                    fillColor: false
                });
            });
            // $("#sparkline2").sparkline([24, 43, 43, 55, 44, 62, 44, 72], {
            //     type: 'line',
            //     width: '100%',
            //     height: '60',
            //     lineColor: '#1ab394',
            //     fillColor: "#ffffff"
            // });

            $("#sparkline3").sparkline([74, 43, 23, 55, 54, 32, 24, 12], {
                type: 'line',
                width: '100%',
                height: '60',
                lineColor: '#ed5565',
                fillColor: "#ffffff"
            });

            $("#sparkline4").sparkline([24, 43, 33, 55, 64, 72, 44, 22], {
                type: 'line',
                width: '100%',
                height: '60',
                lineColor: '#ed5565',
                fillColor: "#ffffff"
            });
        })
    </script>

</body>


</html>
